<template>
  <div>
    <div>
      <el-form v-if="inputFn === 'danxuan'">
        <el-row v-for="(item, index) in options" :key="index">
          <el-col class="onew" style="min-height: 80px">
            <el-form-item>
              <el-radio-group v-model="code" ref="abc">
                <el-radio
                  :label="list[index] + ':'"
                  style="top: 5px"
                  @change="danxuanbtn(1)"
                ></el-radio>
              </el-radio-group>
              <el-input
                placeholder="请输入内容"
                style="width: 200px; top: 5px"
                v-model="title[index]"
                @blur="titleBtn(1)"
              ></el-input>
              <el-upload
                class="avatar-uploader"
                action="#"
                :on-change="
                  (file, fileList) => {
                    return changeFile(file, fileList, index);
                  }
                "
                :before-upload="beforeUpload"
                :http-request="
                  (params) => {
                    return upload(params, index);
                  }
                "
                :file-list="fileList[index - 1]"
                style="float: left"
              >
                <div style="position: relative">
                  <img
                    v-if="imageUrl.length"
                    :src="imageUrl[index]"
                    class="avatar"
                    alt=""
                  />
                  <span v-else class="avatar-uploader-icon">上传图片</span>
                  <i
                    class="el-icon-circle-close"
                    style="
                      position: absolute;
                      top: -12px;
                      right: -12px;
                      font-size: 22px;
                    "
                  ></i>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-form v-if="inputFn === 'duoxuan'">
        <el-row v-for="(item, index) in optionsData" :key="index">
          <el-col class="onew" style="min-height: 80px">
            <el-form-item>
              <el-checkbox
                style="top: 5px; margin-right: 39px"
                @change="danxuanbtn(duoxuanData)"
              ></el-checkbox>
              <span class="oneqw">{{ list[index] + ":" }}</span>
              <el-input
                placeholder="请输入内容"
                style="width: 200px; top: 5px"
                v-model="duoxuanData.title[index]"
                @blur="titleBtn(duoxuanData)"
              ></el-input>
              <el-upload
                class="avatar-uploader1"
                action="#"
                :on-change="
                  (file, fileList) => {
                    return changeFile(file, fileList, index);
                  }
                "
                :before-upload="beforeUpload"
                :http-request="
                  (params) => {
                    return upload(params, index);
                  }
                "
                :file-list="fileList[index - 1]"
                style="display: inline-block"
              >
                <div style="position: relative">
                  <img
                    v-if="imageUrl.length"
                    :src="duoxuanData.imgUrl[index]"
                    class="avatar"
                  />
                  <span v-else class="avatar-uploader-icon">上传图片 </span>
                  <i
                    class="el-icon-circle-close"
                    style="
                      position: absolute;
                      top: -12px;
                      right: -12px;
                      font-size: 22px;
                    "
                  ></i>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKIDEG2YnmUvylHWUBgurXx6yZuylHYYHjup', // 身份识别 ID
  SecretKey: 'f3B2dwykFTQ7YibCXbOuA9qGPJxKuEH3' // 身份密钥
})
export default {
  components: {
  },
  props: {
    options: {
      type: Number,
      default: 4
    },
    inputFn: {
      type: String,
      default: 'danxuan'
    },
    optionsData: {
      type: Array
    }
  },
  data () {
    return {
      imageUrl: [],
      fileList: [[], [], [], []], // 图片地址设置为数组
      list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
      formData: {
        type: [],
        title: '',
        imgUrl: []
      },
      duoxuanData: {
        type: [],
        title: [],
        imgUrl: []
      },
      code: '',
      title: []
    }
  },
  methods: {
    danxuanbtn (data) {
      if (data !== 1) {
        this.optionsData[0].code = data.type.join(',')
      } else {
        this.optionsData[0].code = this.code
      }
    },
    titleBtn (data) {
      if (data !== 1) {
        this.optionsData[0].title = data.title.join(',')
      } else {
        this.optionsData[0].title = this.title[data]
      }
    },
    changeFile (file, fileList, index) {
      this.fileList[index] = fileList
      this.optionsData[0].imgObj = this.fileList[index][0]
    },
    // 上传前的钩子函数
    // file 上传的文件
    beforeUpload (file) {
      // 要开始文件上传的检查
      // 文件类型 文件大小
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if (!types.includes(file.type)) {
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG格式')
        return false
      }
      // 检查大小
      const maxSize = 5 * 1024 * 1024
      if (maxSize < file.size) {
        this.$message.error('图片大小不能超过5M')
        return false
      }
      // 记住当前的uid  用来确定上传的是哪个图片
      this.currentFileUid = file.uid
      // 显示进度条
      this.showPercent = true
      return true
    },
    // 自定义上传动作  有个参数  有个file对象  是我们需要上传到腾讯赟服务器的内容
    upload (params, index) {
      // 上传文件到腾讯云
      if (params.file) {
        cos.putObject(
          {
            Bucket: 'nanxiangxiaosheng-1309172731', // 存储桶
            Region: 'ap-chengdu', // 地域
            Key: params.file.name, // 文件名
            Body: params.file, // 要上传的文件对象
            StorageClass: 'STANDARD' // 上传的模式类型 直接默认 标准模式即可
          // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
          },
          (err, data) => {
          // data返回数据之后 应该如何处理
            console.log(err || data)
            // data中有一个statusCode === 200 的时候说明上传成功
            if (!err && data.statusCode === 200) {
            //   此时说明文件上传成功  要获取成功的返回地址
            // fileList才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
            // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
            // 需要知道当前上传成功的是哪一张图片
              this.fileList[index] = this.fileList[index].map((item) => {
                this.$set(item, 'url', `http://${data.Location}`)
                return item
              })
            }
          }

        )
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-upload--picture-card {
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px soild #fff;
}
.el-form-item__content {
  .el-radio-group,
  .el-input,
  .el-checkbox,
  span {
    float: left;
  }
}
</style>
